<template>
  <div class="main_div">
    <!-- <h1>部门管理</h1> -->
     <div class="btn_div">
        <el-button type="success" style="background-color: #42B983;" @click="dialogFormVisible = true">新增规格</el-button>
     </div>

    <!-- 自定义的表格组件 -->
    <Table ref="mytable" :param="table"></Table>

    <!-- 新增规格的弹窗 -->
    <el-dialog title="新增规格" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="规格名称">
          <el-input style="width: 80%;" v-model="form.guigeName" autocomplete="off" placeholder="请输入规格的名称"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="insertGuige()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 展示规格数据列表的弹窗 -->
    <el-dialog title="规格数据列表" :visible.sync="dialogFormVisible2">
        <el-button type="success" style="background-color: #42B983; margin-bottom: 20px;" @click="dialogFormVisible3 = true">添加规格数据</el-button>
        <div style="display: flex; flex-direction: row; justify-content: space-around;">
          <div style="font-size: 30px;" v-for="val in guigeVals">{{val.guigeVal}}</div>
        </div>
    </el-dialog>

    <!-- 展示规格数据列表的弹窗 -->
    <el-dialog title="新增规格数据" :visible.sync="dialogFormVisible3">
        <el-form :model="form">
          <el-form-item label="规格数据">
            <el-input style="width: 80%;" v-model="form2.guigeVal" autocomplete="off" placeholder="请输入规格数据"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible3 = false">取 消</el-button>
          <el-button type="primary" @click="insertGuigeVal()">确 定</el-button>
        </div>
    </el-dialog>

  </div>
</template>

<script>
  import Table from './Table'

  export default{
    components:{
      Table
    },
    data(){
      return {
        form: {
          guigeName: ""
        },
        form2: {
          guigeId: "",
          guigeVal: ""
        },
        //弹窗口的隐藏属性
        dialogFormVisible: false,
        dialogFormVisible2: false,
        dialogFormVisible3: false,
        //规格数据列表
        guigeVals: [],
        //表格组件的属性
        table: {
          title: [
            {name: "规格编号", col:"id"},
            {name: "规格名称", col:"guigeName"},
            {name: "可选值数量", col:"valCount"},
            {name: "创建时间", col:"createTime"}
          ],
          url: "/guige/list",
          page: {
            enable: true, //是否开启表格组件的分页
            pageSize: 5 //每页显示多少条
          },
          btns: [
            {
              btnName: "设置规格值",
              click: (rowData) => {
                //根据规格id， 查询当前规格下的规则值
                this.queryGuigeVals(rowData.id);

                //弹出一个弹窗 - 展示规格数据列表
                this.dialogFormVisible2 = true;

                //设置一个规格的id
                this.form2.guigeId = rowData.id;
              }
            }
          ]
        }
      }
    },
    methods: {
      //新增规格
      insertGuige(){
        this.$.ajax({
          url: "/guige/insert",
          data: {
            guigeName: this.form.guigeName
          },
          success: (data) => {
            this.$refs.mytable.request();
            this.dialogFormVisible = false;
            this.form.guigeName = "";
          }
        });
      },
      //查询指定规格的数据列表
      queryGuigeVals(guigeId){
        this.$.ajax({
          url: "/guige/list/vals",
          data: {
            guigeId: guigeId
          },
          success: (data) => {
            this.guigeVals = data.data;
          }
        });
      },

      //添加规格的数据
      insertGuigeVal(){
        this.$.ajax({
          url: "/guige/insert/vals",
          data: {
            guigeId: this.form2.guigeId,
            guigeVal: this.form2.guigeVal
          },
          success: (data) => {
             //关闭弹出框
             this.dialogFormVisible3 = false;
             this.form2.guigeVal = "";

             //刷新列表
             this.queryGuigeVals(this.form2.guigeId);
             this.$refs.mytable.request();
          }
        });
      }
    }
  }
</script>

<style>
  .main_div h1 {
    margin-bottom: 20px;
  }

  .main_div {
    background-color: white;
    height: 100%;
    overflow: scroll;
  }

  .btn_div {
    width: 80%;
    text-align: left;
    margin: 20px;
  }

</style>
